<template>
	<view class="bizPage">
		<status-bar title=" " :tabBar="back == 0" hideBg color="#fff" />
		<!-- <view :style="{ height: totalHeight + 'px' }"></view> -->
		<image class="back" :src="staticImg + 'BJ.png'" mode="widthFix"></image>
		<view class="info d-flex a-center p-re">
			<image
				class="avatar m-right20"
				:src="imgUrls(mainStore.userInfo.avatar)"
				mode="aspectFill"
				@click="changeAvatar"></image>
			<view class="flex-1 sizr30 white">{{ mainStore.userInfo.userName }}</view>
		</view>
		<view class="card bgwhite p-re">
			<view class="size28 color-222 bold m-bot40">剩余次数</view>
			<view class="d-flex j-sb text-center">
				<view>
					<view class="color-222 m-bot20">
						<text class="size38">{{ countData.aiContractDraftCount || '--' }}</text>
						<text class="size24">次</text>
					</view>
					<view class="size24 color-999">AI合同起草</view>
				</view>
				<view>
					<view class="color-222 m-bot20">
						<text class="size38">{{ countData.aiConsultationCount || '--' }}</text>
						<text class="size24">次</text>
					</view>
					<view class="size24 color-999">AI咨询</view>
				</view>
				<view>
					<view class="color-222 m-bot20">
						<text class="size38">{{ countData.legalModelCount || '--' }}</text>
						<text class="size24">次</text>
					</view>
					<view class="size24 color-999">法律大模型</view>
				</view>
				<!-- <view>
					<view class="color-222 m-bot20">
						<text class="size38">--</text>
						<text class="size24">次</text>
					</view>
					<view class="size24 color-999">AI合同审查</view>
				</view> -->
			</view>
		</view>
		<view class="cellGroup bgwhite p-re">
			<view
				class="cell d-flex a-center"
				@click="toUrl(item.path)"
				v-for="(item, index) in list"
				:key="index">
				<image class="icon" :src="staticImg + item.icon"></image>
				<view class="flex-1 size28 color-222">{{ item.title }}</view>
				<text class="iconfont icon-a-zujian32 size24 color-999"></text>
			</view>
		</view>
		<!-- <view class="btn flexac size28 white">退出登录</view> -->
		<tab-bar v-if="back == 0" />
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { staticImg } from '@/utils/config.js';
	import { useMainStore } from '@/stores/index';
	import { toUrl, imgUrls, uploadFile, Toast } from '@/utils/utils.js';
	import { saveMyInfo } from '@/utils/api.js';
	import Http from '@/utils/request.js'
	import tabBar from '../components/tabBar.vue';
	import statusBar from '../components/statusBar.vue'

	const mainStore = useMainStore();
	const totalHeight = computed(() => {
		return mainStore.statusBarHeight + mainStore.navBarHeight;
	});
	const list = ref([
		{ title: '个人信息', icon: 'grxx.png', path: '/bizPage/user/info' },
		{ title: '我的订单', icon: 'wddd.png', path: '/bizPage/user/myOrder' },
		{ title: '咨询历史', icon: 'zxls.png', path: '/bizPage/user/consultHistory' },
		// { title: '修改密码', icon: 'xgmm.png', path: '/pages/login/editPass' },
	]);
	const back = ref('0')

	onLoad((e) => {
		if(e.back) back.value = e.back
		getCount()
	})

	const changeAvatar = () => {
		uni.chooseImage({
			count: 1,
			success: async (res) => {
				let file = res.tempFilePaths[0];
				let avatar = await uploadFile(file);
				saveMyInfo({
					avatar,
				});
			},
		});
	};

	const countData = ref('')

	const getCount = () => {
		Http.get({
			url: '/hr/getConsultCount'
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			countData.value = res.data || ''
		})
	}
</script>

<style lang="scss" scoped>
	.bizPage {
		height: 100vh;
		background: #f9f9f9;
	}
	.back {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	.info {
		padding: 20rpx 50rpx 40rpx;
		.avatar {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}
	}
	.card {
		width: 710rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 0 auto 20rpx;
	}
	.cellGroup {
		width: 710rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
		margin: auto;
		.cell {
			height: 100rpx;
			&:not(:last-child) {
				border-bottom: 1rpx solid #f2f2f2;
			}
			.icon {
				width: 36rpx;
				height: 36rpx;
				margin: 0 20rpx;
			}
		}
	}
	.btn {
		width: 710rpx;
		height: 88rpx;
		background: #bbbbbb;
		border-radius: 20rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(150rpx + constant(safe-area-inset-bottom));
		bottom: calc(150rpx + env(safe-area-inset-bottom));
		z-index: 1;
	}
</style>
